<template>
    <div>
        

        <div class="addBtn">
            <el-dialog title="新增" :visible.sync="dialogAdd">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">

                    <el-form-item label="ID" prop="id">
                        <el-input v-model="ruleForm.id" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="方案标题" prop="title">
                        <el-input v-model="ruleForm.title" placeholder="请输入方案标题"></el-input>
                    </el-form-item>

                    <el-form-item label="优惠金额" prop="price">
                        <el-input v-model="ruleForm.price" placeholder="请输入优惠金额">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="最低消费" prop="min_price">
                        <el-input v-model="ruleForm.min_price" placeholder="请输入最低消费金额">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="抵扣金额" prop="money">
                        <el-input v-model="ruleForm.money" placeholder="请输入实际抵扣金额">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="状态" prop="status">
                        <el-radio-group v-model="ruleForm.status">
                            <el-radio :label="1">显示</el-radio>
                            <el-radio :label="0">不显示</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="有效期" prop="exp_day" v-if="ruleForm.scene != 3">
                        <el-input-number v-model="ruleForm.exp_day" :min="1" :max="365"></el-input-number>
                        <span style="margin-left: 10px;">天</span>
                    </el-form-item>

                    <el-form-item label="使用场景" prop="scene">
                        <el-select v-model="ruleForm.scene" placeholder="请选择使用场景">
                            <el-option label="充值" :value="1"></el-option>
                            <el-option label="充值" :value="2"></el-option>
                            <el-option label="方案" :value="3"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="方案描述" prop="desc">
                        <el-input type="textarea" v-model="ruleForm.desc" :rows="3" placeholder="请输入方案描述"></el-input>
                    </el-form-item>

                </el-form>
                <div style="text-align: right;">
                    <el-button @click="clickDeleteAdd">取消</el-button>
                    <el-button type="primary" @click="clickConfirmAdd">确认1</el-button>
                </div>
            </el-dialog>
        </div>

        <div class="addBtn">
            <el-dialog title="修改" :visible.sync="dialogTableVisible">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">

<el-form-item label="ID" prop="id">
    <el-input v-model="ruleForm.id" disabled></el-input>
</el-form-item>

<el-form-item label="方案标题" prop="title">
    <el-input v-model="ruleForm.title" placeholder="请输入方案标题"></el-input>
</el-form-item>

<el-form-item label="优惠金额" prop="price">
    <el-input v-model="ruleForm.price" placeholder="请输入优惠金额">
        <template slot="append">元</template>
    </el-input>
</el-form-item>

<el-form-item label="最低消费" prop="min_price">
    <el-input v-model="ruleForm.min_price" placeholder="请输入最低消费金额">
        <template slot="append">元</template>
    </el-input>
</el-form-item>

<el-form-item label="抵扣金额" prop="money">
    <el-input v-model="ruleForm.money" placeholder="请输入实际抵扣金额">
        <template slot="append">元</template>
    </el-input>
</el-form-item>

<el-form-item label="状态" prop="status">
    <el-radio-group v-model="ruleForm.status">
        <el-radio :label="1">显示</el-radio>
        <el-radio :label="0">不显示</el-radio>
    </el-radio-group>
</el-form-item>

<el-form-item label="有效期" prop="exp_day" v-if="ruleForm.scene != 3">
    <el-input-number v-model="ruleForm.exp_day" :min="1" :max="365"></el-input-number>
    <span style="margin-left: 10px;">天</span>
</el-form-item>

<el-form-item label="使用场景" prop="scene">
    <el-select v-model="ruleForm.scene" placeholder="请选择使用场景">
        <el-option label="充值" :value="1"></el-option>
        <el-option label="充值" :value="2"></el-option>
        <el-option label="方案" :value="3"></el-option>
    </el-select>
</el-form-item>

<el-form-item label="方案描述" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc" :rows="3" placeholder="请输入方案描述"></el-input>
</el-form-item>

</el-form>
                <div style="text-align: right;">
                    <el-button @click="clickDelete">取消</el-button>
                    <el-button type="primary" @click="clickConfirm">确认</el-button>
                </div>
            </el-dialog>
        </div>

        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="id" label="ID" align="center">
            </el-table-column>
            <el-table-column prop="title" label="名称" align="center">
            </el-table-column>
            <el-table-column prop="price" label="金额" align="center">
            </el-table-column>
            <el-table-column prop="number" label="次数" align="center">
            </el-table-column>
            <el-table-column prop="original_price" label="原价" align="center">
            </el-table-column>
            <el-table-column prop="content" label="介绍" align="center">
            </el-table-column>
            

            <!-- <el-table-column label="时间" prop="effective_time" align="center">
                
            </el-table-column> -->
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <div style="margin-top: 10px;">
                        <!-- <el-button type="primary" icon="el-icon-edit" circle @click="modifyVip(scope.row)"></el-button> -->

                        <el-button type="warning"   circle @click="giftsVip(scope.row)">
                            赠
                        </el-button>
                        <!-- <el-button type="danger" icon="el-icon-delete" circle @click="deleteVip(scope.row)"></el-button> -->
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import {  updateYhq , sendGiftCoupon , getPredictionList as getYhqList , sendGiftPrediction } from '../../../libs/api'
export default {
    data() {
        return {
            typeList: [{ type: 'AI寻胆', id: 1 }, { type: '爆冷预警', id: 2 }, { type: '组合会员卡', id: 3 }],
            wd_id: 1,
            dialogManagementVisible: false,
            rules: {
                // name: [
                //     { required: true, message: '请输入名称', trigger: 'blur' },
                // ],
            },
            ruleForm: {
                "title": "",
                "price": "",
                "min_price": "",
                "money": "",
                "status": 1,
                "desc": "",
                "exp_day": '',
                "scene": ''
            },
            options: [{
                value: '选项1',
                label: '上架'
            }, {
                value: '选项2',
                label: '不上架'
            }],
            platformList: [{
                values: '选项1',
                label: 'H5'
            }, {
                values: '选项2',
                label: 'APP'
            }, {
                values: '选项3',
                label: '小程序'
            }],
            values: '',
            value: '',
            input: '',
            sortCard: '',
            content: '',
            dialogImageUrl: '',
            dialogTableVisible: false,
            dialogVisible: false,
            managementData: [],
            // 总数据
            tableData: [],
            currentPage: 1,
            PageSize: 10,
            fileList: [],
            pageSizes: [5, 10],
            typeStatus: '',
            vipLx: '',
            totalCount: 1,
            vipCardId: '',
            dialogAdd: false
        }
    },
    created() {
        this.getVipUserList()
    },
    methods: {
        giftsVip(e){
            console.log(e)
            this.$prompt('请输入手机号', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
        //   this.$message({
        //     type: 'success',
        //     message: '赠送的手机号是: ' + value
        //   });
        sendGiftPrediction({
            mobile: value,
            id:e.id
            }).then(res => {
                console.log(res)
                if(res.code==1){
                    this.$message({
                        type: 'info',
                        message: res.msg
                    });
                }
            })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
        },
        showItemFun(v) {
            if (v.status == 1) {
                v.status = 2;

            } else {
                v.status = 1;
            }

            updateYhq(v).then(res => {
                console.log(res)
            })

            // console.log(v)
        },
        selectType(e) {
            this.wd_id = e
            this.getVipCardList()
            // this.ruleForm.typeid = e
            // console.log(this.wd_id)
            // this.getAIlist()
        },
        // 显示第几页
        handleCurrentChange(val) {
            console.log(this.vipCardId)
            // 改变默认的页数
            this.currentPage = val
            this.getVipUserList()
        },
        // 分页
        // 每页显示的条数
        handleSizeChange(val) {

            // 改变每页显示的条数
            this.PageSize = val
            // 点击每页显示的条数时，显示第一页
            console.log(val)
            this.PageSize = val
            // 改变每页显示的条数时，要将页码显示到第一页
            this.currentPage = 1

            this.getVipUserList()
        },
        getVipUserList() {
            getYhqList({
            }).then(res => {
                this.tableData = res.data
            })
        },
        clickDeleteAdd() {
            this.dialogAdd = false
        },
        modifyVip(row) {
            console.log(row)
            this.ruleForm = JSON.parse(JSON.stringify(row))
            this.dialogTableVisible = true
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleRemove(file, fileList) {
            console.log(fileList);
            console.log(file);
        },
        handleButtonAdd() {
            this.dialogAdd = true
            this.ruleForm.id = ''
            // this.dialogTableVisible = true
        },
        clickDelete() {
            this.dialogTableVisible = false
        },
        clickConfirm() {
            updateYhq({
                ...this.ruleForm
            }).then(res => {
                Object.assign(this.ruleForm, {
                    effective_time: '',
                    money: '',
                    type: '',
                    name: ''
                })
                this.ruleForm = {}
                this.getVipUserList()
            })
            this.dialogTableVisible = false
        },
        clickConfirmAdd() {
            updateYhq(
                {
                    ...this.ruleForm
                }
            ).then(res => {
                this.ruleForm = {}
                this.getVipUserList()
            })
            this.dialogAdd = false
        },
        handleButton1Click(id, e) {
            console.log(id)
            this.typeStatus = e
            this.vipLx = id.lx_day
            this.vipCardId = id.id
            vipUserList({
                page: this.currentPage,
                limit: this.PageSize,
                vip_lx: id.lx_day,
                is_dq: e,
                id: id.id
            }).then(res => {
                console.log(res)
                this.managementData = res.data.list
                this.alltabData = res.data.list
                this.totalCount = res.data.total
            })
            this.dialogManagementVisible = true
        },
        handleButtonDelete(e) {

        },
        handleAvatarSuccess(res, file, fileList) {
            // this.imageUrl = URL.createObjectURL(file.raw);
            console.log(res)
            console.log(URL.createObjectURL(file.raw))
            this.fileList = fileList
            this.ruleForm.img_url = res.data.url
            // this.ruleForm.img_url = URL.createObjectURL(file.raw)
        },
    }
}
</script>

<style>
.tab {
    display: flex;
    align-items: center;
    margin: 30px 30px;
}

.tabSearch {
    display: flex;
}

.addBtn {
    margin-left: 30px;
    margin-bottom: 30px;
}

.ql-editor {

    height: 300px;

}
</style>
